<template>
  <div>
    <!-- 查找 -->
    <el-space>
      <el-input v-model.trim="text" placeholder="请输入用户ID" />
      <el-button type="primary" :icon="Search" @click="findUserid">查找</el-button>
    </el-space>
    <!-- 地址数据表格 -->
    <el-table :data="addressData" border style="width: 100%">
      <el-table-column prop="id" label="地址ID" align="center " />
      <el-table-column prop="userId" label="用户ID" align="center " />
      <el-table-column prop="consignee" label="签收人" align="center " />
      <el-table-column prop="phone" label="手机号" align="center " />
      <el-table-column prop="province" label="省份" align="center " />
      <el-table-column prop="city" label="城市" align="center " />
      <el-table-column prop="county" label="区/县" align="center " />
      <el-table-column prop="address" label="详细地址" align="center " />
    </el-table>
    <!-- 分页 -->
    <pa-ging v-bind="pages" @changePage="changePage" @changeLimit="changeLimit" />
  </div>
</template>

<script>
import { Search } from "@element-plus/icons-vue";
import { post } from "@/utlis/http";
export default {
  components: {
    Search,
  },
  data() {
    return {
      text: "", //搜索框
      addressData: [], //地址数据表格
      pages: {
        page: 1, //页
        limit: 10, //条
        total: 10, //总条数
      },
    };
  },
  setup() {
    return {
      Search,
    };
  },
  created() {
    this.initiaLize();
  },
  methods: {
    //条
    changeLimit(val) {
      this.pages.limit = val;
      this.initiaLize();
    },
    //页
    changePage(val) {
      this.pages.page = val;
      this.initiaLize();
    },
    //渲染表格数据
    initiaLize() {
      let data = {
        _gp: "admin.address",
        _mt: "list",
        userId: this.text,
        page: this.pages.page,
        limit: this.pages.limit,
      };
      post(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.addressData = data.items;
          this.pages.total = data.total;
        }
      });
    },
    // 查找
    findUserid() {
      this.initiaLize();
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin: 20px 0px 40px 0px;
}
</style>